<template>
	<view class="recruit">
		<!-- #ifndef H5 -->
		<!-- <topTitle :styles="{back:true,title:'技师招募',color:'#fff'}" /> -->
		<!-- #endif -->
		<view class="form" v-if="!typeFlag">
			<view class="top_image">
				<image :src="bannerUrl" mode=""></image>
			</view>
			<view class="form_detail">
				<view class="name" style="padding: 0 20px;">
					<text class="title">请输入姓名</text>
					<input type="text" v-model="name" placeholder="姓名" />
					
				</view>
				<view class="gender"style="padding: 0 20px;">
					<text class="title">请选择性别</text>
					<radio-group class="radio_group" @change="radioChange">
						<label class="radio">
							<radio value="2" :checked="current == 2" color="#24d576"/><text style="margin-right: 10px;">女</text>
						</label>
						<label class="radio">
							<radio value="1" :checked="current == 1" color="#24d576"/><text>男</text>
						</label>
					</radio-group>
				</view>
				<view class="tel"style="padding: 0 20px;">
					<text class="title">联系方式</text>
					<input type="text" maxlength="11" v-model="tel" placeholder="手机号码" />
					
				</view>
				<view class="age"style="padding: 0 20px;">
					<text class="title">请输入年龄</text>
					<input type="text" v-model="age" placeholder="年龄" />
					
				</view>
				<view class="city"style="padding: 0 20px;display: block;" @click="show = true">
					
					<!-- <picker class="city_picker" @change="cityChange" :value="cityIndex" :range="cityList"> -->
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view class="uni-input title">请选择城市</view>
						<input style="text-align: right;" placeholder-style="text-align:right;" type="text" v-model="city" placeholder="意向合作城市" disabled="true" />
					</view>
					</picker>
				</view>
				<view class="photo_submit">
					<view class="add_photo" @click="uploadImage">
						<uni-icons v-if="!imageUpload" type="plusempty" size="60" color="#c7c7c7"></uni-icons>
						<image v-else :src="imageSrc" mode=""></image>
					</view>
					<view class="title">
						<text style="font-size: 18px;font-weight: bold;color: #000;">请上传本人近期照片</text>
						<text>图片不得超过2M</text>
					</view>
				</view>
			</view>
			<view class="submit" @click="submit">
				提交
			</view>
		</view>
		<view class="success" v-else>
			<view class="image_box">
				<image src="/static/images/my/submit_success.png" mode=""></image>
			</view>
			<view class="success_text">提交成功</view>
		</view>
		<fui-picker :options="cityList" :linkage="true" :show="show" @change="cityChange" @cancel="cancel"></fui-picker>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				typeFlag: false,
				current: 2,
				city: '',
				cityIndex: 0,
				cityList: ['长沙'],
				name: '',
				age: '',
				tel: '',
				imageUpload: false,
				imageSrc: '',
				show:false,
				bannerUrl:'', 	//顶部banner图
			};
		},
		onLoad() {
			this.getCityList()
			this.getBanner()
		},
		methods: {
			getBanner(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
					console.log(result,'--------------------config')
						this.bannerUrl = result.data.banner_technician
					}
				})
			},
			getCityList(){
				this.$http({
					url:'/api/city_list',
					method:'get',
					success:result=>{
						console.log(result)
						this.cityList = result.data.list.filter(el=>{
							return el.is_show == 1
						})
						this.cityList.forEach((item,index)=>{
							item.text = item.name
							item.value = item.id
						})
						console.log(this.cityList,'------------citylist')
					}
				})
			},
			radioChange(e) {
				console.log(e)
				this.current = e.detail.value
			},
			submit() {
				if(this.name == ''){
					uni.showToast({
						title:'请输入姓名',
						icon:"none"
					})
					return false;
				}
				if(this.tel == ''){
					uni.showToast({
						title:'请输入手机号',
						icon:"none"
					})
					return false;
				}
				// let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/
				// console.log(reg.test(this.tel),'---------------123123123')
				// if(!reg.test(this.tel)){
				// 	uni.showToast({
				// 		title:'请输入正确的手机号码',
				// 		icon:'none'
				// 	})
				// 	return false;
				// }
				if(this.age == ''){
					uni.showToast({
						title:'请输入年龄',
						icon:"none"
					})
					return false;
				}
				if(this.cityIndex == 0){
					uni.showToast({
						title:'请选择意向城市',
						icon:"none"
					})
					return false;
				}
				if(this.imageSrc == ''){
					uni.showToast({
						title:'请上传本人照片',
						icon:"none"
					})
					return false;
				}
				this.$http({
					url:'/api/technician/apply',
					method:'post',
					data:{
						name:this.name,
						age:this.age,
						sex:this.current,
						phone:this.tel,
						city_id:this.cityIndex,
						image:this.imageSrc,
					},
					success:result=>{
						console.log(result,'------------------------提交')
						if(result.code == 200){
							uni.showToast({
								title:result.msg,
								duration:3000,
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}else{
							uni.showToast({
								title:result.msg,
								icon:"error"
							})
						}
					}
				})
			},
			cityChange(e) {
				console.log(e)
				const val = e.value
				this.cityIndex = val
				this.city = e.text
				this.cancel()
			},
			cancel(){
				this.show = false;
			},
			uploadImage() {
				if(this.imageUpload){
					this.imageUpload = false;
				}
				const that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success:async function(res) {
						console.log('chooseImage-----》》》》》》》》', res);
						const tempFilePaths = res.tempFilePaths;
						if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小不能超过20M',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						uni.showLoading({
							title: '上传中...',
							mask:true,
						})
						if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) { //图片小于5M不压缩，大于5M压缩
							that.uploadImgFile(tempFilePaths, that)
						} else {
							// #ifndef H5
							uni.compressImage({
								src: res.tempFilePaths[0],
								quality: 80,
								success: result => {
									console.log(result, '=========res');
									that.uploadImgFile(result.tempFilePath, that)
								}
							})
							// #endif
							// #ifdef H5
							let src = await that.$image(tempFilePaths[0])
							that.uploadImgFile([src.data], that)
							// #endif
						}
						
					}
				});
			},
			uploadImgFile(filePath, that) {
				uni.uploadFile({
					url: this.service+'/api/upload_image',
					filePath: filePath[0],
					name: 'image',
					header: {
						Authorization:'Bearer '+ uni.getStorageSync('token')
						// Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJkYW9qaWEud2VhcHBlLmNuIiwiYXVkIjoiZGFvamlhLndlYXBwZS5jbiIsImlhdCI6MTY1NzA4OTQ4MCwibmJmIjoxNjU3MDg5NDgwLCJleHAiOjE2NTk2ODE0ODAsImRhdGEiOnsiaWQiOjIyfX0.TGdJfr1tOq8JZFxjsAZbb4ScfTnSJ0GgVFVOpxlj43o'
					},
			 	success: response => {
						let res = JSON.parse(response.data);
						if (res.code == 200) {
							// that.showInfo = res.data
							that.imageUpload = true
							that.imageSrc = res.data.url
							console.log(that.imageSrc,'----------------------123')
							console.log('请求成功_______________', res);
							uni.hideLoading()
						}
						
			  },
					fail: err => {
						uni.hideLoading()
						console.log('请求失败_______________', err);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.recruit {
		width: 100%;
		height: 100%;

		.form {
			width: 100%;
			height: 100%;
			background-color: #F6F6F6;

			.top_image {
				width: 100%;
				height: 400rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.form_detail {
				border: 3px solid #36EC9F;
				border-radius: 0 0 15px 15px;
				.name{
					// padding: 0 20px;
				}
				>view {
					height:94upx;
					line-height: 94upx;
					margin: 40upx 36upx;
					border: 6upx solid #36EC9F;
					border-radius: 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					>input {
						text-align: right;
					}
					.title{
						// width: 200px;
						text-align: left;
						flex-wrap: nowrap;
					}

					.radio_group {
						// width: 96px;
						display: flex;
						align-items: center;
						margin-left: 20upx;
					}

					.city_picker {
						text-align: right;
					}
				}

				.photo_submit {
					height: 120px;
					border: none;
					margin: 15px 35px;

					.add_photo {
						width: 100px;
						height: 100px;
						line-height: 100px;
						text-align: center;
						border: 2px solid #36EC9F;

						>image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 20px;

						>text {
							font-size: 14px;
							color: #6A6A6A;
						}
					}
				}
			}

			.submit {
				margin: 15px 9px;
				background-color: #24D576;
				border-radius: 18px;
				height: 44px;
				line-height: 44px;
				font-size: 22px;
				font-weight: bold;
				color: #fff;
				text-align: center;
			}
		}

		.success {
			.image_box {
				width: 183px;
				height: 125px;
				margin: 200px auto 50px;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.success_text {
				text-align: center;
				font-size: 20px;
				color: #676767;
			}
		}
	}
</style>
